<!--
 * @Description: 
 * @Autor: ZachGmy
 * @Date: 2021-06-25 08:56:50
 * @LastEditors: ZachGmy
 * @LastEditTime: 2021-06-25 09:03:04
-->
<template>
  <div>
    <!-- state -->
    <!-- 在template中获取state的方式 -->
    <h2>我是从Vuex中获取到的count:{{ $store.state.count }}</h2>
    <!-- 通过计算属性获取state中状态 -->
    <h2>{{ vuexCount }}</h2>
    <!-- 通过辅助函数获取state中的状态 -->
    <h2>通过辅助函数声明的count:{{ count }}</h2>
    <!-- <h2>data中的count:{{ count }}</h2> -->

    <!-- getters -->
    <!-- 在template中获取getters的方式 -->
    <h2>{{ $store.getters.multiplyCount }}</h2>
    <!-- 在计算属性中获取getters里的属性 -->
    <!-- 通过辅助函数 获取getters里的属性 -->

    <!-- mutations -->
    <!-- 在组件内部直接去修改 vuex中count的值 -->
    <!-- 在vue组件中直接去修改vuex state中的状态是不推荐的 -->
    <!-- <button @click="{{$store.state.count++;}}">+</button> -->

    <!-- 通过mutations 提交的方式去修改vuex state中的状态 -->
    <!-- 在按钮的点击事件中 使用commit的时候去执行mutations中的方法 -->
    <button @click="mutClickAdd">加1</button>

    <!-- 通过Actions 模拟异步交互 -->
    <button @click="actionClick">action点击</button>
  </div>
</template>

<script>
//引入 state的辅助函数
import { mapState, mapGetters, mapMutations } from "vuex";
export default {
  data() {
    return {
      // count: 10,
    };
  },
  methods: {
    // mutations的辅助函数
    ...mapMutations(["increment"]),
    // 实现mutations中increment的方法
    mutClickAdd() {
      // this.$store.mutations.increment() 错误的用法
      // 1.提交mutations的方式
      // this.$store.commit("increment", { hCount: 10 });

      // 2.使用辅助函数
      this.increment({ hCount: 10 });
    },
    // 在组件中调用actions中的方法
    actionClick() {
      this.$store.dispatch("incrementAsync", { hCount: 20 });
    },
  },
  // Vuex中的state状态一般我们保存在计算属性中
  computed: {
    // 2.通过辅助函数获取state中对应的状态
    // 2.1 记得引入对应的辅助函数 import { mapState } from "vuex";
    // 2.2 直接使用辅助函数声明对应的状态即可
    ...mapState(["count"]),
    // getters的辅助函数
    // 1.可以直接通过this.$store.state.xxx 获取对应的状态
    vuexCount() {
      return this.$store.state.count;
    },
  },
};
</script>

<style scoped>
</style>